<template>
  <div>
    <el-upload
        class="upload-demo"
        drag
        v-loading="loading"
        element-loading-text="正在上传中，请稍后..."
        :show-file-list="false"
        :headers="headers"
        :action="`${$apiHost}/img/fileImgUrl`"
        :on-success="onSuccess"
        :on-error="onError"
        :before-upload="onBefore"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <!-- <div class="el-upload__tip" slot="tip">大小不超过 800KB</div> -->
    </el-upload>

    <div v-if="isDoc(fileList)">
      <el-link
          style="font-size: 12px;color: #66b1ff"
          :href="'https://'+fileList">{{ fileList.split('img/')[1] }}
      </el-link>
      <el-link icon="el-icon-delete" @click="deleteFile(fileList)"></el-link>
    </div>
    <div v-if="isImage(fileList)&&type!='图纸'">
      <el-image style="width: 50px" :src="'https://'+fileList"
                :preview-src-list="['https://'+fileList]">
      </el-image>
      <el-link icon="el-icon-delete" @click="deleteFile(fileList)"></el-link>
    </div>
    <div v-if="type=='图纸'" v-for="(item,index) in fileListForDraw">
      <el-link
          style="font-size: 12px;color: #66b1ff"
          :href="'https://'+item">{{ item.split('img/')[1] }}
      </el-link>
      <el-link icon="el-icon-delete" @click="_delete(index)"></el-link>
    </div>
  </div>
</template>
<script>
import store from "../../../store";

export default {
  name: "uploadExcel",
  props: {
    type: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      token: store.state.tokenv3 || this.$quinn.getStorage("token"),
      fileList: '',
      fileListForDraw: [],
      loading: false
    };
  },
  computed: {
    headers() {
      return {
        token: this.token
      };
    },
  },
  methods: {
    isImage(filename) {
      return /\.(png|jpg|jpeg|img)$/i.test(filename);
    },
    isDoc(filename) {
      return /\.(doc|pdf|docx|xlsx|dxf|wps|dwg|xls)$/i.test(filename);
    },
    onSuccess(res) {
      this.loading = false
      if (this.type == '合同' && !(res.result[0].endsWith('.doc') || res.result[0].endsWith('.docx'))) return this.$message.warning('合同请上传word文件！')
      if (res.code !== 200) {
        this.$message(res.msg || "上传失败");
      } else if (this.type == '图纸') {
        this.$message({message: "导入成功！", type: "success"});
        this.fileListForDraw.push(res.result[0])
        let fileContent = {
          file: this.fileListForDraw.toString(),
          type: this.type
        }
        this.$emit("addStatus", fileContent);
      } else {
        this.$message({message: "导入成功！", type: "success"});
        this.fileList = res.result[0]
        let fileContent = {
          file: this.fileList,
          type: this.type
        }
        this.$emit("addStatus", fileContent);
      }
    },
    onError() {
      this.$message("导入失败");
    },
    onBefore(file) {
      this.loading = true
    },
    deleteFile(i) {
      this.fileList = ''
      let fileContent = {
        file: this.fileList,
        type: this.type
      }
      this.$emit("addStatus", fileContent);
    },
    _delete(i) {
      this.fileListForDraw.splice(i, 1)
      let fileContent = {
        file: this.fileListForDraw.toString(),
        type: this.type
      }
      this.$emit("addStatus", fileContent);
    }
  }
};
</script>


<style scoped>

</style>